<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 300px;
            height: 300px;
            background-color: blanchedalmond;
            overflow: hidden;
        }

        .inner {
            width: 150px;
            height: 150px;
            background-color: blueviolet;
            margin: 50px;
        }
    </style>
</head>

<body>
    <h1>你好</h1>
    <h1>你好</h1>
    <h1>你好</h1>
    <h1>你好</h1>
    <h1>你好</h1>
    <h1>你好</h1>
    <h1>你好</h1>
    <h1>你好</h1>
    <h1>你好</h1>
    <div class="box" id="box">
        <div class="inner" id="inner"></div>
    </div>

    <a href="https://woniuxy.com" id="link">蜗牛学苑</a>
    <input type="text" id="input">

    <script>
        const boxEle = document.querySelector('#box')
        const linkEle = document.querySelector('#link')
        const inputEle = document.querySelector('#input')
        const innerEle = document.querySelector('#inner')

        innerEle.onclick = function (e) {
            console.log("儿子的事件");
            // 阻止事件传播（只触发当前标签自己的事件，不触发外部祖先标签的事件）
            e.stopPropagation();  
        }

        // linkEle.onclick = function (e) {
        //     // 阻止标签的默认行为（阻止a标签跳转）
        //     e.preventDefault();
        // }

        // inputEle.onkeydown = function (e) {
        //     // 阻止标签的默认行为（阻止输入框输入内容）
        //     if (e.key == '1') {
        //         e.preventDefault();
        //     }
        // }


        boxEle.onclick = function (e) {
            console.log('相对于页面', e.pageX, e.pageY);
            console.log('相对于浏览器显示区', e.clientX, e.clientY);
            console.log('相对于e.target标签', e.offsetX, e.offsetY);
        }

        document.onkeyup = function (e) {
            console.log('e.key', e.key);
            console.log('e.keyCode', e.keyCode);
        }
    </script>
</body>

</html>